<!--这是患者取药页面-->

<template>
  <div class="getMedicine">
    <el-card shadow="never">
      <el-card v-loading="loading" style="width: 100%;margin-top: 20px;color: #333333;"  shadow="never">
        <!-- 搜索框栏 姓名和身份证号 name和personId-->
        <div class="searchBar" style="width:100%;display: flex;flex-direction: row; align-items: center;">
          <el-input v-model="form.name" placeholder="请输入患者姓名" style="width: 200px;margin-right: 20px;"></el-input>
          <el-input v-model="form.personId" placeholder="请输入患者身份证号" style="width: 300px;">
            <template #append>
              <el-button style="color: #FFFFFF;background-color: #3b82f6;" :icon="Search" @click="search" />
            </template>
          </el-input>
        </div>
        <el-divider></el-divider>
        <el-table :data="prescriptionOrders" style="width: 100%; font-size: 14px;" stripe show-overflow-tooltip>
          <el-table-column prop="name" label="患者姓名" width="100" align="center"></el-table-column>
          <el-table-column prop="personId" label="患者身份证号" width="180" align="center"></el-table-column>
          <el-table-column prop="age" label="患者年龄" width="100" align="center"></el-table-column>
          <el-table-column prop="doctorName" label="医生姓名" width="100" align="center"></el-table-column>
          <el-table-column prop="status" label="处方单状态" width="100" align="center">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.status === '20'">医保支付</el-tag>
              <el-tag type="info" v-if="scope.row.status === '25'">普通支付</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="处方单时间" width="180" align="center"></el-table-column>
          <el-table-column prop="price" label="价格" width="80" align="center"></el-table-column>
          <el-table-column prop="insurancePrice" label="医保价格" width="100" align="center" ></el-table-column>
          <!-- 查看按钮 -->
          <el-table-column label="处方单药品列表" align="center">
            <template #default="scope">
              <el-button type="primary" text size="mini" @click="check(scope.$index, scope.row)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template #default="scope">
              <el-button type="primary" text size="mini" @click="handleEdit(scope.$index, scope.row)">取药</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
    <!-- 点击对应的查看 显示对应的数据 -->
    <el-dialog v-model="dialogVisible" title="处方单药品列表" width="50%">
      <el-descriptions :column="2" border size="small" v-for="(medicine, index) in medicineVOList" :key="index">
        <el-descriptions-item label="药品名称">
          {{ medicine.name }}
        </el-descriptions-item>
        <el-descriptions-item label="规格">
          {{ medicine.specification }}
        </el-descriptions-item>
        <el-descriptions-item label="厂家">
          {{ medicine.manufacturer }}
        </el-descriptions-item>
        <el-descriptions-item label="价格">
          {{ medicine.price }}
        </el-descriptions-item>
        <el-descriptions-item label="医保价">
          {{ medicine.insurancePrice }}
        </el-descriptions-item>
        <el-descriptions-item label="剂型">
          {{ medicine.dosage }}
        </el-descriptions-item>
        <el-descriptions-item label="用法用量">
          {{ medicine.instruction }}
        </el-descriptions-item>
        <el-descriptions-item label="数量">
          {{ medicine.number }}
        </el-descriptions-item>
        <el-descriptions-item label="操作">
          <el-button type="primary" size="small" @click="checkMedicationLocation(medicine.medicineId)">查看药品位置</el-button>
        </el-descriptions-item>

      </el-descriptions>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import qs from 'qs';
import {Search} from "@element-plus/icons";
import { ElMessageBox } from 'element-plus'
/*定义表格加载动画*/
const loading = ref(false);
/*定义表格数据*/
const prescriptionOrders = ref([]);
const medicineVOList = ref([]);
/*定义控制弹框显示隐藏的变量*/
const dialogVisible = ref(false);

/*定义表单数据*/
const form = ref({
  name:"",
  personId:""
});

/*定义加载表格数据的方法*/
const search = () => {
  loading.value = true;
  let data = qs.stringify(form.value);
  axios.get(TEST_URL + "/v1/order/findPrescriptionOrders" , data).then((res) => {
    if (res.data.code == 2001) {
      ElMessage({
        message: "加载成功",
        type: "success"
      });
      console.log("加载处方单接口响应数据", res.data);
      prescriptionOrders.value = res.data.data;
      loading.value = false;
    } else {
      ElMessage({
        message: res.data.data.message,
        type: "error"
      });
    }
  });
};
/*定义取药参数*/
const params = reactive({
  id: "",
  status: 30
})
/*定义取药方法*/
const handleEdit = (index, row) => {
  params.id = row.id;
  console.log("取药接口请求参数", params);
  ElMessageBox.confirm("确认取药吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    loading.value = true;
    axios.post(TEST_URL + "/v1/prescription/update",params).then((res) => {
      if (res.data.code == 2001) {
        ElMessage({
          message: "取药成功",
          type: "success"
        });
        loading.value = false;
        search();
      } else {
        ElMessage({
          message: res.data.message,
          type: "error"
        })
      }
    })
  }).catch(() => {
    loading.value = false;
  });
};
/*页面加载完毕立即执行*/
onMounted(() => {
  search();
});
/*定义查看方法*/
const check = (index, row) => {
  console.log("查看处方单接口请求参数", row);
  dialogVisible.value = true;
  params.id = row.id;
  medicineVOList.value = row.medicineVOList;
  console.log("查看处方单接口响应数据", medicineVOList.value);
}
/*定义查看药品位置方法*/
const checkMedicationLocation = (id) => {
  console.log("查看药品位置接口请求参数", params);
  axios.get(TEST_URL + "/v1/medicine/getMedicine/" + id).then((res) => {
    if(res.data.code == 2001){
      console.log("查看药品位置接口响应数据", res.data);
      ElMessage({
        message: "查看药品位置成功"+res.data.data.storageLocation+"数量"+res.data.data.amount,
        type: "success"
      });
    }
  })
}
</script>

<style scoped>

</style>